<template>

	<div>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
			<div style="display: flex;">
				<div style="width: 10px;background: #409EFF;" /><span
					style="margin-left: 8px;font-weight: bold;">基本信息</span>
			</div>

			<div>
				<el-row>
					<el-col :span="span">
						<el-form-item label="组织机构" prop="deptId">
							<el-select v-model="ruleForm.deptId" placeholder="请选择" size="mini" clearable filterable>
								<el-option v-for="item in jglist" :label="item.deptName" :value="item.deptId"
									:key="item.deptId"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="span">
						<el-form-item label="车牌号" prop="cheliangpaizhao">
							<el-input v-model="ruleForm.cheliangpaizhao" placeholder="请输入" size="mini" clearable />
						</el-form-item>
					</el-col>

					<el-col :span="span">
						<el-form-item label="车牌颜色" prop="chepaiyanse">
							<el-select v-model="ruleForm.chepaiyanse" placeholder="请选择" size="mini" clearable
								filterable>
								<el-option v-for="item in colorList" :label="item.dictValue" :value="item.dictKey"
									:key="item.dictKey"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="span">
						<el-form-item label="车辆类型" prop="shiyongxingzhi">
							<el-select v-model="ruleForm.shiyongxingzhi" placeholder="请选择" size="mini" clearable
								filterable>
								<el-option v-for="item in syxzList" :label="item.dictValue" :value="item.dictKey"
									:key="item.dictKey"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="span">
						<el-form-item label="运营状态" prop="cheliangzhuangtai">
							<el-select v-model="ruleForm.cheliangzhuangtai" placeholder="请选择" size="mini" clearable
								filterable>
								<el-option v-for="item in yyztList" :label="item.dictValue" :value="item.dictKey"
									:key="item.dictKey"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="span">
						<el-form-item label="运营商" prop="yunyingshang">
							<el-input v-model="ruleForm.yunyingshang" placeholder="请输入" size="mini" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="span">
						<el-form-item label="车主" prop="chezhu">
							<el-input v-model="ruleForm.chezhu" placeholder="请输入" size="mini" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="span">
						<el-form-item label="车主电话" prop="chezhudianhua">
							<el-input v-model="ruleForm.chezhudianhua" placeholder="请输入" size="mini" clearable />
						</el-form-item>
					</el-col>
				</el-row>

			</div>

			<div style="display: flex;">
				<div style="width: 10px;background: #409EFF;" /><span
					style="margin-left: 8px;font-weight: bold;">设备信息</span>
			</div>

			<div>
				<el-row>
					<el-col :span="span">
						<el-form-item label="真实SIM卡号" prop="zongduanid">
							<el-input v-model="ruleForm.zongduanid" placeholder="请输入" size="mini" clearable />
						</el-form-item>
					</el-col>

					<el-col :span="span">
						<el-form-item label="接入方式" prop="platformconnectiontype">
							<el-select v-model="ruleForm.platformconnectiontype" placeholder="请选择" size="mini" clearable
								filterable>
								<el-option v-for="item in jrfsList" :label="item.dictValue" :value="item.dictKey"
									:key="item.dictKey"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="span">
						<el-form-item label="终端类型" prop="zhongduanleixing">
							<el-select v-model="ruleForm.zhongduanleixing" placeholder="请选择" size="mini" clearable
								filterable @change="changeZdLx">
								<el-option v-for="item in zdlxList" :label="item.dictValue" :value="item.dictKey"
									:key="item.dictKey"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="span">
						<el-form-item label="协议类型" prop="terminalprotocoltype">
							<el-select v-model="ruleForm.terminalprotocoltype" placeholder="请选择" size="mini" clearable
								filterable>
								<el-option v-for="item in xylxList" :label="item.dictValue" :value="item.dictKey"
									:key="item.dictKey"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="span">
						<el-form-item label="地方标准" prop="carowneraddress">
							<el-select v-model="ruleForm.carowneraddress" placeholder="请选择" size="mini" clearable
								filterable>
								<el-option v-for="item in zddfbzList" :label="item.dictValue" :value="item.dictKey"
									:key="item.dictKey"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="span">
						<el-form-item label="厂商" prop="zhongduanchangshang">
							<el-input v-model="ruleForm.zhongduanchangshang" placeholder="请输入" size="mini" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="span">
						<el-form-item label="视频通道数" prop="videochannelnum">
							<el-input-number v-model="ruleForm.videochannelnum" :min="0" :max="32" placeholder="请输入"
								size="mini" clearable />
						</el-form-item>
					</el-col>
				</el-row>
			</div>

			<div style="display: flex;">
				<div style="width: 10px;background: #409EFF;" /><span
					style="margin-left: 8px;font-weight: bold;">服务信息</span>
			</div>

			<div>
				<el-row>
					<el-col :span="span">
						<el-form-item label="安装时间" prop="gpsanzhuangshijian">
							<el-date-picker v-model="ruleForm.gpsanzhuangshijian" type="datetime" placeholder="选择日期时间"
								size="mini" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="span" style="margin-left: 8px;">
						<el-form-item label="保险到期时间" prop="baoxiandaoqishijian">
							<el-date-picker v-model="ruleForm.baoxiandaoqishijian" type="datetime" placeholder="选择日期时间"
								size="mini" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="span" style="margin-left: 8px;">
						<el-form-item label="年检到期时间" prop="xiacinianjianriqi">
							<el-date-picker v-model="ruleForm.xiacinianjianriqi" type="datetime" placeholder="选择日期时间"
								size="mini" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
						</el-form-item>
					</el-col>

					<el-col :span="span">
						<el-form-item label="服务时间" prop="ruhushijian">
							<el-date-picker v-model="fwsj" type="datetimerange" range-separator="至"
								start-placeholder="开始日期" end-placeholder="结束日期" @change="changFwsj"
								value-format="yyyy-MM-dd HH:mm:ss" size="mini">
							</el-date-picker>
						</el-form-item>
					</el-col>


				</el-row>


			</div>



		</el-form>
		<div style="text-align: center;margin-top: 10px;">
			<el-button type="primary" @click="submit">提交</el-button>
		</div>
	</div>


</template>

<script>
	import {
		getJgList,
		getVehColors,
		getShiyongxingzhi,
		getYYZT,
		getZDJRFS,
		getZDLX,
		getZDXYLX,
		getZDDFXYLX
	} from '@/api/sys.js'

	import {
		updateVeh,
		addVeh
	} from '@/api/clgl.js'


	export default {
		name: 'clxxDialog',
		props: {
			full: {
				type: Object,
				default: function() {
					return false;
				},
				required: true
			},
			curRow: {
				type: Object,
				default: function() {
					return null;
				},
				required: true
			},
			status: {
				type: Object,
				default: function() {
					return null;
				},
				required: true
			}
		},
		watch: {
			full: function(val) {
				if (val) {
					this.span = 4
				} else {
					this.span = 8
				}
			},
			curRow: function(val) {
				if (this.status === 'edit') {
					this.ruleForm = JSON.parse(JSON.stringify(val))
					this.fwsj = [this.ruleForm.ruhushijian, this.ruleForm.guohushijian]
				}

			}
		},
		data() {
			return {
				rules: {
					deptId: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					cheliangpaizhao: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					chepaiyanse: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					shiyongxingzhi: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					cheliangzhuangtai: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					zongduanid: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					platformconnectiontype: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					zhongduanleixing: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					terminalprotocoltype: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					gpsanzhuangshijian: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}]


				},
				ruleForm: {
					deptId: null,
					cheliangpaizhao: null,
					chepaiyanse: null,
					shiyongxingzhi: null,
					cheliangzhuangtai: null,
					yunyingshang: null,
					chezhu: null,
					chezhudianhua: null,
					zongduanid: null,
					platformconnectiontype: null,
					zhongduanleixing: null,
					terminalprotocoltype: null,
					carowneraddress: null,
					videochannelnum: 0,
					zhongduanchangshang: null,
					gpsanzhuangshijian: null,
					baoxiandaoqishijian: null,
					xiacinianjianriqi: null,
					ruhushijian: null,
					guohushijian: null
				},
				jglist: [],
				colorList: [],
				syxzList: [],
				yyztList: [],
				jrfsList: [],
				zdlxList: [],
				xylxList: [],
				zddfbzList: [],
				fwsj: [],
				span: 8
			}
		},
		methods: {
			changeZdLx(val) {
				if (val === 0) {
					this.$set(this.rules, 'carowneraddress', [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}])
				} else {
					this.$set(this.rules, 'carowneraddress', [{
						required: false,
						message: '请选择',
						trigger: 'change'
					}])
				}
			},
			removeEmptyValues(obj) {
				for (const key in obj) {
					if (obj[key] === null || obj[key] === undefined) {
						delete obj[key];
					} else if (typeof obj[key] === 'object' && Object.keys(obj[key]).length === 0) {
						delete obj[key];
					}
				}
				return obj;
			},
			submit() {
				this.$refs.ruleForm.validate(valid => {
					if (valid) {
						var param = this.removeEmptyValues(this.ruleForm)
						if (this.status === 'edit') {
							delete param['createtime']
							delete param['gpstime']
							delete param['acc']
							delete param['runStatus']
							delete param['speed']
							updateVeh(param).then(res => {
								if (res.code === 200) {
									this.$emit('on-save')
								}
							})
						}else if(this.status==='add'){
							delete param['createtime']
							delete param['gpstime']
							delete param['acc']
							delete param['runStatus']
							delete param['speed']
							addVeh(param).then(res=>{
								if(res.code===200){
									this.$emit('on-save')
								}else{
									this.$message({
										message:res.msg,
										type:'error'
									})
								}
							})
						}

					}
				})
			},
			changFwsj(val) {
				console.log(val)
				this.ruleForm.ruhushijian = val[0]
				this.ruleForm.guohushijian = val[1]
			},

			init() {
				getJgList().then(res => {
					if (res.code === 200) {
						this.jglist = res.data
					}
				})
				getVehColors().then(res => {
					if (res.code === 200) {
						this.colorList = res.data
					}
				})
				getShiyongxingzhi().then(res => {
					if (res.code === 200) {
						this.syxzList = res.data
					}
				})
				getYYZT().then(res => {
					if (res.code === 200) {
						this.yyztList = res.data
					}
				})

				getZDJRFS().then(res => {
					if (res.code === 200) {
						this.jrfsList = res.data
					}
				})
				getZDLX().then(res => {
					if (res.code === 200) {
						this.zdlxList = res.data
					}
				})
				getZDXYLX().then(res => {
					if (res.code === 200) {
						this.xylxList = res.data
					}
				})
				getZDDFXYLX().then(res => {
					if (res.code === 200) {
						this.zddfbzList = res.data
					}
				})
			}
		},
		mounted() {
			this.init()
			if (this.curRow) {
				if (this.status === 'edit') {
					console.log(this.curRow)
					this.ruleForm = JSON.parse(JSON.stringify(this.curRow))
					this.ruleForm.deptId = this.ruleForm.deptId + ""
					this.ruleForm.cheliangzhuangtai = this.ruleForm.cheliangzhuangtai + ""
					this.ruleForm.zhongduanleixing = this.ruleForm.zhongduanleixing + ""
					this.fwsj = [this.ruleForm.ruhushijian, this.ruleForm.guohushijian]
				}

			}
		}
	}
</script>

<style>
</style>